<template>
	<view class="page">
		<uni-header title="手机号登录" color="#F7F7F7"></uni-header>
		<view class="container login-panel">
			<form @submit="handleSubmit">
			<view class="tabbar">
				<view class="tabbar-item active">
					登录
				</view>
				
			</view>
			
			<view class="form-panel" >
				<view class="form-box">
					<view class="form-item">
						<label class="form-label">手机号码</label>
						<input type="text" :auto-focus="true" name="phone" v-model="loginForm.phone" placeholder-class="placeholder" placeholder="请输入您的手机号码" class="form-control" />
					</view>
					<view class="form-item captcha-form-item">
						<label class="form-label">验证码</label>
						<view class="captcha-box">
							<input type="text" name="code" maxlength="10" v-model="loginForm.code" placeholder="请输入您的短信验证码" placeholder-class="placeholder" class="form-control" />
							<uni-captcha text="获取" retry-text="重新获取" class="btn-captcha" :time="60" :phone="loginForm.phone" type="LOGIN" />
						</view>
						
					</view>
				</view>
				
				
			</view>	
			<button form-type="submit" :disabled="!canSubmit" class="btn-submit">登录</button>
			</form>
		  </view>
		  
		  
		</view>
	</view>
	
</template>

<script>
	const weappService = global.api.weappService;	
	import TokenManager from '@/mpf/token-manager'
	const LAST_LOGIN_ACCOUNT = "LAST_LOGIN_ACCOUNT"
	
	export default {
		data() {
			return {
				
				loginForm:{
					phone: null,
					password: null,
					code: null,
					uuid: null
				}
				
			}
		},
		onLoad() {
	
		},
		onShow() {
			let lastLoginAccount = uni.getStorageSync(LAST_LOGIN_ACCOUNT);
			if(lastLoginAccount){
				this.loginForm.phone = lastLoginAccount
			}
		},
		computed:{
			canSubmit(){
				return this.loginForm.phone && this.loginForm.code;
			}
		},
		methods: {

			handleSubmit () {
				this.doLogin();
			},
			doLogin(){
				uni.setStorage({
					key:LAST_LOGIN_ACCOUNT,
					data: this.loginForm.phone
				})
				global.showLoading("登录中……");
				global.api.appService.smsLogin({
					body: this.loginForm,
					success:(res) => {
					  global.success('登录成功');
					  TokenManager.set(res);
					  this.afterLogin(res);
					},
					complete:(res) => {
					  global.hideLoading();
					}
				});
			},
			afterLogin(token){
				this.$store.commit('setLoginUserId', token.user_id);
				global.onLogin();
			},
			cancel(){
				uni.navigateBack({
				
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.page{
		background-color: #17181A;
		height: 100vh;
		display: flex;
		flex-direction: row;
		color: #363837;
	}
	
	.login-panel{
	  box-sizing: border-box;
	  padding-top: 37rpx;
	  text-align: center;
	  flex:1;
	}
	.tabbar{
		display: flex;
		width: 748rpx;
		margin:0 auto;
		align-items: flex-end;
		padding-top:60rpx;
		padding-left: 80rpx;
		.tabbar-item{
			color: #F7F7F7;
			font-size: 28rpx;
			margin-right: 56rpx;
			&.active{
				font-size: 48rpx;
				position: relative;
				text-align: left;
				line-height: 68rpx;
				&::after{
					content: "";
					display: block;
					width: 136rpx;
					height: 12rpx;
					background: $uni-color-primary;
					border-radius: 2rpx;
					margin-top:20rpx;
				}
			}
		}
	}
	.form-box{
		margin:34rpx auto 0;
		width: 590rpx;
	}
	
	.form-item{
		width: 590rpx;
		margin-top:100rpx;
		.form-label{
			display: block;
			font-size: 28rpx;
			text-align: left;
			color: #F7F7F7;
			font-size: 32rpx;
			font-weight: 800;
			line-height: 38rpx;	
			margin-bottom: 60rpx;
		}
	}
	
	.form-item input{
		height:80rpx;
		background: transparent!important;
		line-height: 80rpx;
		box-sizing: border-box;
		/* font-size:24rpx; */
		font-size: 30rpx;
		text-align: left;
		color: #F7F7F7;
		
		
	}
	

	
	.captcha-box{
		display: flex;
		align-items: center;
		input{
			flex:1;
		}
		.btn-captcha{
			height:80rpx;
			line-height: 80rpx;
			/* width:200rpx; */
			font-size:28rpx;
			color: $uni-color-primary;
			text-align: center;
		}
	}
	
	.btn-submit{
		font-weight: bold;
		font-size: 32rpx;
		background-color: $uni-button-primary;
		border-radius: 4rpx;
		margin: 100rpx auto 0;
		color:#FFFFFF;
		padding:0;
		line-height: 108rpx;
		letter-spacing: 3rpx;
		
		width: 590rpx;
		height: 108rpx;
		border-radius: 20rpx;
	}

	.placeholder{
		color: #666666;
		font-size: 28rpx;
	}
	

</style>
